import React, { useState } from "react";
import { Button } from "antd";
import "./Demo.less";
import { useMemo } from "react";

const Demo = function () {
  const [supNum, setSupNum] = useState(10);
  const [oppNum, setOppNum] = useState(5);
  const [x, setX] = useState(0);

  const calculeTotal = useMemo(() => {
    let total = supNum + oppNum;
    let ratio = "--";
    if (total > 0) ratio = ((supNum / total) * 100).toFixed(2) + "%";
    return total;
  }, [supNum, oppNum]);

  return (
    <div className="vote-box">
      <div className="main">
        <p>支持人数：{supNum}人</p>
        <p>反对人数：{oppNum}人</p>
        <p>支持比率：{calculeTotal}</p>
        <p>x:{x}</p>
      </div>
      <div className="footer">
        <Button type="primary" onClick={() => setSupNum(supNum + 1)}>
          支持
        </Button>
        <Button type="primary" danger onClick={() => setOppNum(oppNum + 1)}>
          反对
        </Button>
        <Button onClick={() => setX(x + 1)}>干点别的事</Button>
      </div>
    </div>
  );
};

export default Demo;
